<template>
	<div class="about">
		<h1>{{id ? '编辑' : '新建'}}英雄</h1>
		<el-form label-width="120px" v-on:submit.native.prevent="save">
			<!-- 添加Tabs 标签页 https://element.eleme.cn/#/zh-CN/component/tabs -->
			<!-- 	<el-tabs>
							<el-tab-pane label="基础信息">内容</el-tab-pane>
							<el-tab-pane label="技能">内容</el-tab-pane>
						</el-tabs>	-->
			<el-tabs type="border-card" value="basic" name="basic"><!-- tabs加value，默认选中技能页面 -->
				<el-tab-pane label="基础信息">
					<el-form-item label="名称">
						<el-input v-model="model.name">
						</el-input>
					</el-form-item>
					<el-form-item label="称号">
						<el-input v-model="model.title">
						</el-input>
					</el-form-item>
					<el-form-item label="头像">
						<!-- 看elemen-ui中的上传upload -->
						<!-- actions那里不是用axios请求，所以路径要写全（绝对路径），不建议写http://localhost:3000/admin/api，后面修改路径会很麻烦 -->
						<!-- 成功以后添加时间afterUpload -->
						<el-upload
							class="avatar-uploader"			
							:action="uploadUrl"
							:headers="getAuthHeaders()"
							:show-file-list="false"
							:on-success="res => $set(model, 'avatar', res.url)"
						>
							<img v-if="model.avatar" :src="model.avatar" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="Banner">		<!-- 横幅，背景 -->
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :headers="getAuthHeaders()"
              :show-file-list="false"
              :on-success="res => $set(model, 'banner', res.url)"
            >
              <img v-if="model.banner" :src="model.banner" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
					<el-form-item label="类型">
						<!-- 解释：选项option有很多选项，但是开始model.categories为空（即未有值选中），然后选中某个值，这个值通过数据绑定，存储在model.categories，然后this.model（有items，categories属性，是一个对象）传递到数据库 -->
						<!-- 若是编辑,开始时model.categories有值，所以开始时选择框会出现值，不为空 -->
						<el-select v-model="model.categories" multiple>
							<!-- 选项，遍历categories，显示的是name，存储到数据库的是_id -->
							<el-option
								v-for="item of categories"
								v-bind:key="item._id"
								v-bind:label="item.name"
								v-bind:value="item._id"
							>
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="难度">
						<el-rate style="margin-top:0.6rem" :max="9" show-score  v-model="model.scores.difficulty"></el-rate>
					</el-form-item>
					<el-form-item label="技能">
						<el-rate style="margin-top:0.6rem" :max="9" show-score  v-model="model.scores.skills"></el-rate>
					</el-form-item>
					<el-form-item label="攻击">
						<el-rate style="margin-top:0.6rem" :max="9" show-score  v-model="model.scores.attack"></el-rate>
					</el-form-item>
					<el-form-item label="生存">
						<el-rate style="margin-top:0.6rem" :max="9" show-score  v-model="model.scores.survive"></el-rate>
					</el-form-item>

					<el-form-item label="顺风出装">
						<!-- 多选，双向数据绑定，值存储在model对象的items1属性 -->
						<el-select v-model="model.items1" multiple>
							<!-- 这里是选择装备，遍历items（已有物品/装备） -->
							<el-option
								v-for="item of items"		
								v-bind:key="item._id"
								v-bind:label="item.name"
								v-bind:value="item._id"
							>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="逆风出装">
						<!-- 多选，双向数据绑定，值存储在model对象的items2属性 -->
						<el-select v-model="model.items2" multiple>
							<!-- 这里是选择装备，遍历items（已有物品/装备） -->
							<el-option
								v-for="item of items"
								v-bind:key="item._id"
								v-bind:label="item.name"
								v-bind:value="item._id"
							>
							</el-option>
						</el-select>
					</el-form-item>

					<!-- 分别把input输入的值存储在model对象usageTips等3个属性 -->
					<el-form-item label="使用技巧">
						<el-input type="textarea" v-model="model.usageTips"></el-input>
					</el-form-item>
					<el-form-item label="对抗技巧">
						<el-input type="textarea" v-model="model.battleTips"></el-input>
					</el-form-item>
					<el-form-item label="团战思路">
						<el-input type="textarea" v-model="model.teamTips"></el-input>
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane label="技能" name="skills"><!-- pane加name -->
					<el-button  size="small" v-on:click="model.skills.push({})"><!-- +图标 --> <!-- 重点：model.skills是一个空数组，空数组[].push({})，添加一个子对象，实现可以添加多个技能 --> 
						<i class="el-icon-plus"></i> 添加技能
					</el-button>
					<!-- 一行两列 md:middle 每列12份，所以一行两列，共24份	-->
					<el-row type="flex" style="flex-wrap: wrap">	<!-- 一行两列 md:middle 每列12份，所以一行两列，共24份 ，样式代表要换行	-->
						<el-col :md=12 v-for="(item,i) in model.skills" v-bind:key="i"><!-- model.skills是数组，用in，也可以获取到索引i -->
							<el-form-item label="名称">
								<el-input v-model="item.name"></el-input>
							</el-form-item>
							<el-form-item label="图标">
								<!-- 计算属性computed调用不用加括号，事件methods调用要加括号 -->
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
									:headers="getAuthHeaders()"
                  :show-file-list="false"
                  :on-success="res => $set(item,'icon',res.url) "
                >    <!-- 看afterUpload ,this.model.avatar = res.url,这里应该写的是item.icon = res.url-->
                  <img v-if="item.icon" :src="item.icon" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
							<el-form-item label="冷却值">				
                <el-input v-model="item.delay"></el-input>
              </el-form-item>
              <el-form-item label="消耗">
                <el-input v-model="item.cost"></el-input>
              </el-form-item>
							<el-form-item label="描述">
                <el-input v-model="item.description" type="textarea"></el-input>
              </el-form-item>
              <el-form-item label="小提示">
                <el-input v-model="item.tips" type="textarea"></el-input>
              </el-form-item>
							<el-form-item>
								<!-- 删除按钮思路，上面添加技能是@click='model.skills.push({})',这里删除数组中的一个成员，因为上面 106	el-col :md=12 v-for="(item,i) in model.skills", 所以i为索引，删除数组的某个成员用splice切割，切割索引i的的一个值，所以直接删除model数组中的一个子对象-->
								<el-button size="small" type="danger" 
                @click="model.skills.splice(i, 1)"
                >删除</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-tab-pane>

				<el-tab-pane label="最佳拍档" name="partner">
					<el-button size="small" v-on:click="model.partners.push({})">
						<i class="el-icon-plus"></i> 添加英雄
					</el-button>
					<el-row type="flex" style="flex-wrap:wrap"><!-- 行 -->
						<el-col :md="12" v-for="(item,i) in model.partners" v-bind:key="i"><!-- 列-->
							<el-form-item label="英雄">
								<el-select v-model="item.hero"  filterable><!-- 可搜索 Select选择器 -->
									<el-option
										v-for="hero in heroes"
										v-bind:key="hero._id"
										v-bind:label="hero.name"
										v-bind:value="hero._id"
									></el-option><!-- value存储到数据库，label显示到页面 -->
								</el-select>
							</el-form-item>
							<el-form-item label="描述">
								<el-input v-model="item.description" type="textarea"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button size="small" type="danger" @click="model.partners.splice(i, 1)">删除</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>

			<el-form-item style="margin-top: 1rem;">
        <el-button type="primary" native-type="submit">保存</el-button>
      </el-form-item>
		</el-form>
	</div>
</template>

<script>
/* eslint-disable */
export default {
	data(){
		return {
			// 定义新属性,注意difficulty，最好先定义一个
			categories: '',
			items: '',
			heroes: [],
			model:{
				name: '',
				avatar: '',
				scores: {
					difficulty: 0
				},
				// 新建英雄时model.skills为空，不能进行push操作，因为无法识别是否为数组，而编辑英雄时获取了数据，但是model.skills为空数组，可以进行push操作Error in v-on handler: "TypeError: Cannot read property 'push' of undefined"
				// 解决方法，直接定义model.skills为空数组，使得在添加，编辑都能进行push操作哦
				skills: [],
				partners: [],	//初始partner
			},
		}
	},
	// 接收id，尽可能与路由解耦
	props:{
		id: {}
	},
	methods:{
		async save(){
			// console.log(this.id)
      let res
      if (this.id) {
        res = await this.$http.put(`rest/heroes/${this.id}`, this.model)
      } else {
        res = await this.$http.post('rest/heroes', this.model)
			}
			// const res = await this.$http.post('items', this.model)
			// push要加/ 斜杠
			// this.$router.push('/heroes/list')
			this.$message({
        type: 'success',
        message: '保存成功'
      })
		},
		async fetch(){
			const res = await this.$http.get(`rest/heroes/${this.id}`)
			// 以下方法会把服务端的数据完整替换，scores里面设置的difficulty属性值不能复制，这种方式是属于浅拷贝，不能复制对象的属性的属性
			// this.model = res.data
			// 深拷贝：Object.assign,第一个是空对象，第二个是默认数据，第三个是服务端传递的数据，从左到右的顺序，先把默认数据添加到空对象中，再把res.data添加到对象中（总结：先复制this.model，若res.data有this.model中的数据，则会覆盖，没有则合并）
			this.model = Object.assign({}, this.model,res.data, )
		},
		async fetchCategories() {
			// 获取分类的数据，赋值到categories
			const res = await this.$http.get('rest/categories')
			this.categories = res.data
		},
		async fetchItems() {
			// 获取物品（装备）的数据，赋值到categories
			const res = await this.$http.get('rest/items')
			this.items = res.data
		},
		async fetchHeroes(){
			const res = await this.$http.get('rest/heroes')
			this.heroes = res.data
		}
	},
	created(){
		// 网页未加载完毕前获取数据
		this.fetchCategories()
		this.fetchItems()
		this.fetchHeroes()
		// 存在id的情况下才执行fetch事件（编辑）
    this.id && this.fetch()
  }
}
</script>

